<template>
  <div class="dialog__container">
    <el-dialog
      v-model="dialogVisible"
      :title="isEdit ? '编辑企业' : '新增企业'"
      draggable
      width="650px"
      :before-close="beforeClose"
    >
      <div class="dialog__body__container">
        <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          status-icon
        >
          <el-form-item label="企业名称" prop="name">
            <el-input
              v-model="ruleForm.name"
              placeholder="请输入企业名称"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            确定
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup name="AddCompanyDialog">
defineOptions({
  name: "AddCompanyDialog",
  inheritAttrs: false,
});
import type { FormInstance, FormRules } from "element-plus";
import { type ICompany } from "@/api/types";
import { addCompany, editCompany } from "@/api/company/index";
const dialogVisible = ref<boolean>(false);
const isEdit = ref<boolean>(false);
// 打开弹窗逻辑
const handleOpen = (data: { isEdit: boolean; row: ICompany | null }) => {
  isEdit.value = data.isEdit;
  if (isEdit.value && data.row) {
    ruleForm.name = data.row.name;
    ruleForm.companyId = data.row.companyId;
  }
  dialogVisible.value = true;
};
defineExpose({
  handleOpen,
});
// 关闭函数
const beforeClose = (done: any) => {
  // 处理关闭逻辑
  ruleForm.name = "";
  ruleForm.companyId = "";
  if (typeof done === "function") {
    done();
  } else {
    dialogVisible.value = false;
  }
};

const emits = defineEmits(["success"]);
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<ICompany>({
  name: "",
  companyId: "",
});

const rules = reactive<FormRules<ICompany>>({
  name: [{ required: true, message: "请输入企业名称", trigger: "blur" }],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      handleSubmit();
    } else {
      console.log("error submit!", fields);
    }
  });
};

// 表单提交函数
const handleSubmit = async () => {
  let data = {
    ...ruleForm,
  };
  if (!isEdit.value) {
    delete data.companyId;
  }
  console.log("提交参数  ", data);
  let res = !isEdit.value
    ? await addCompany(data)
    : await editCompany(data.companyId ? data.companyId : "", data);
  if (res) {
    emits("success");
    resetForm(ruleFormRef.value);
  }
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  beforeClose();
};
</script>

<style lang="scss" scoped>
.dialog__container {
  .dialog__body__container {
    box-sizing: border-box;
    padding-right: 15px;
    max-height: 70vh;
    overflow-y: auto;
  }
}
</style>
